<template>
    <div class="container">
      <div class="row accompany-container align-items-center">
<!--        <img src="https://img1.baidu.com/it/u=2149696819,4210183051&fm=253&fmt=auto&app=138&f=JPEG" class="img-fluid">-->
        <div class="clo-4">
          <img class="img-fluid acc-img" src="https://img1.baidu.com/it/u=2149696819,4210183051&fm=253&fmt=auto&app=138&f=JPEG">
          <div>

          </div>
        </div>

      </div>

    </div>



</template>
<script>
  export default {
    name: 'accompany',
    data () {
      return {
        albumBackground: "",
      }
    },
    methods: {
      getBackGround () {
        this.albumBackground = "https://img1.baidu.com/it/u=2149696819,4210183051&fm=253&fmt=auto&app=138&f=JPEG"
        return {
          background: "url('https://img1.baidu.com/it/u=2149696819,4210183051&fm=253&fmt=auto&app=138&f=JPEG'",
        }
      }
    }
  }
</script>
<style>
.acc-container{
  width: 100%;
  display: flex;
  justify-content: center;
  /*margin-top: 200px;*/
}
.all-container {
  position: relative;
  width: 50vw;
  display: flex;
  /*margin-top: 200px;*/
}

.accompany-container {
  width: 100%;
  height: 250px;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid #8F8F8F;
}

.acc-img {
  width: 200px;
  height: 200px;

}
.beat_back_ground_container {
  position: absolute;
  width: 100%;
  height: 100%;
  /*left: 50%;*/
  /*right: 50%;*/
  /*margin-left: 30px;*/
  /*margin-right: 30px;*/
  transform: translate(-50%, -50%);
  background: url("https://img1.baidu.com/it/u=2149696819,4210183051&fm=253&fmt=auto&app=138&f=JPEG") no-repeat;
  z-index: -1;
  filter: blur(10px);
  background-size: cover;

}

.beat_head_img {
  width: 100px;
  height: 100px;
}
</style>